@import '~antd/es/style/themes/default.less';

// html {
//   font-size: 1vw;
// }
//  780  532
.login {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 400px;
  height: 360px;
  background-color: white;
  border-radius: 6px;
}

.main {
  border-radius: 6px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;

  .icon {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.2);
    font-size: 24px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: @primary-color;
    }
  }

  .other {
    margin-top: 24px;
    line-height: 22px;
    text-align: left;

    .register {
      float: right;
    }
  }

  :global {
    .antd-pro-login-submit {
      width: 100%;
      margin-top: 24px;
    }
  }
}

@media screen and (max-width: 1200px) {
  html {
    font-size: 12px;
  }
}

@media screen and (max-width: 1920px) {
  html {
    font-size: 0.052vw
  }
}

@media screen and (min-width: 1921px) {
  html {
    font-size: 0.039vw
  }
}

.login-wrapper {
  position: relative;
  margin-top: calc(50vh - 325rem);
  margin-left: calc(75vw - 240rem);
  width: 480rem;
  height: 650rem;
  background-color: transparent;

  .lg-image {
    position: absolute;
    top: -78rem;
    left: -80rem;
  }

  .lg-container {
    .main-title {
      font-size: 60rem;
      color: #1B90FF;
      letter-spacing: 5rem;
      line-height: 60rem;
      font-weight: 500;
    }

    .sub-title {
      margin: 38rem 0 60rem;
      font-size: 36rem;
      color: #474747;
      letter-spacing: 4rem;
      line-height: 36rem;
      font-weight: 400;
    }

    .form-wrapper {
      .fm-input-wrapper {
        margin: 40rem 0;
      }

      .fm-input {
        background: #F9F9F9;
        border: 1rem solid transparent;
        border-radius: 12rem;
        color: #333333;
        line-height: 18rem;
        height: 56rem;
        padding: 0 18rem;
      }

      input[type=password] {
        line-height: 18rem;
      }

      .fm-pwd-input {
        // padding: 0;
      }

      .fm-checkbox {
        margin: 0;
        color: #333333;
        font-size: 14rem;
      }

      .fm-forgetPwd {
        float: right;
        // padding-bottom: 10;
        color: '#2F54EB';
        font-size: 14rem;
      }

      .fm-input-codeSuffix>span {
        top: 9rem;

        .fm-captcha-image {
          width: 120rem;
          /* 设置图片宽度 */
          height: auto;
          /* 保持图片原始高度比例 */
          margin: 0 auto;
          /* 居中对齐验证码图片 */
        }
      }

      .fm-btn {
        width: 100%;
        background: #1B90FF;
        border-radius: 12rem;
        margin-top: 40rem;
        padding: 0;
        height: 54rem;
        line-height: 54rem;
        font-size: 22rem;
        color: #FFFFFF;
        letter-spacing: 4rem;
      }

      .info-tip {
        display: flex;
        align-items: center;
        text-align: left;

        h5 {
          margin: 0px;
        }
      }

      :global {
        .ant-input {
          font-size: 18rem;

          ::-webkit-input-placeholder {
            color: #cccccc;
          }
        }

        .ant-form-item-has-error {

          .ant-form-item-control-input-content>.ant-input,
          .ant-form-item-control-input-content>.ant-input-password {
            border: 1rem solid rgba(255, 57, 57, 1);
          }
        }

        .ant-form-item-explain {
          position: absolute;
          top: 60rem;
          padding: 0 18rem;
        }

        .ant-input-suffix {
          font-size: 18rem;
          color: #333333;
          position: absolute;
          right: 18rem;
          top: 18rem;
        }

        .ant-input:-webkit-autofill,
        .ant-input:-webkit-autofill:hover,
        .ant-input:-webkit-autofill:focus,
        .ant-input:-webkit-autofill:active {
          -webkit-transition-delay: 99999s;
          -webkit-transition: background-color 99999s ease-out;
          // -webkit-text-fill-color: #333333;
        }
      }
    }
  }
}